<template>
	<!-- 左右滚动 -->
	<list-box :name="name" :word="word">
		<scroll-view class="list-scroll noScorll" scroll-x>
			<view class="list-scroll-view" v-for="(item, index) in courseData" :key="index">
				<!-- isColumn 纵向排列 -->
				<course-item class="list-scroll-item" :isColumn="true" :item="item">
				</course-item>
			</view>
		</scroll-view>
	</list-box>
</template>
<script>
	import listBox from './list-box.vue'
	import courseItem from '@/components/common/course-item.vue'
	import courseData from '@/mock/courseData.js'

	export default {
		components: {
			listBox,
			courseItem
		},
		props: {
			name: { // 名称
				type: String,
				default: '热门推荐'
			},
			word: { // 高亮单词，如： 'HOT'
				type: String,
				default: null
			},
			courseData: {
				type: Array,
				default: () => courseData
			}
		}
	}
</script>
<style lang="scss">
	.list-scroll {
		// 内容一行显示不换行
		white-space: nowrap;
		height: 380rpx;

		.list-scroll-view {
			display: inline-block;
			width: 310rpx;
			height: 100%;
			background-color: #fff;
			padding: 0 10rpx;
			margin-right: 20rpx;
			border-radius: 20rpx;
			box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
			.list-scroll-item{
				height: 100%;
				display: block;
			}
		}
	}
</style>
